<template>
  <div class="custom-body" :style="borderStyle">
    <div class="custom-content">
      <div class="custom-data">
        <div class="custom-item">
          <el-card style="height: 100%">
            <div slot="header" class="clearfix">
              <span style="font-weight: bolder">{{ date + '  ' + week }} </span>
            </div>
            <div class="custom-header">重要信息</div>
            <div class="custom-article" v-html="setting.zyxx" />
            <div class="custom-header">注意事项</div>
            <div class="custom-article" v-html="setting.zysx" />
          </el-card>
        </div>
        <div class="custom-item-right">
          <el-card style="height: 100%">
            <div slot="header" class="clearfix">
              <span style="font-weight: bolder">今日值班</span>
            </div>
            <el-table
              :data="dataList"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="xm"
                label="姓名"
                width="180"
              />
              <el-table-column
                prop="bz"
                label="人员性质"
              />
            </el-table>
          </el-card>
        </div>
      </div>
      <div class="custom-data">
        <div class="custom-item">
          <el-card style="height: 100%">
            <el-calendar v-model="dateNow">
              <template
                slot="dateCell"
                slot-scope="{date, data}"
              >
                <p :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                </p>
              </template>
            </el-calendar>
          </el-card>
        </div>
        <div class="custom-item-right">
          <el-card style="height: 100%">
            <div slot="header" class="clearfix">
              <span style="font-weight: bolder">{{ dateNow.getFullYear() + '年' + (dateNow.getMonth() +1) + '月' +dateNow.getDate() + '日  值班安排' }}</span>
            </div>
            <el-table
              :data="queryList"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="xm"
                label="姓名"
                width="180"
              />
              <el-table-column
                prop="bz"
                label="人员性质"
              />
            </el-table>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryAll } from '@/api/portal/user/zbap/index';
export default {
  name: 'PcNewListTempV1',
  props: {
    temp: {
      type: Object,
      default() {
        return {};
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      setting: null,
      column: [],
      dataList: [],
      queryList: [],
      timer: null,
      cid: null,
      date: new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日',
      customStyle: {},
      titleStyle: {},
      bodyStyle: {},
      titleFont: {},
      active: null,
      activeStyle: { },
      dateNow: new Date(new Date().setDate(new Date().getDate() + 1))
    };
  },
  computed: {
    borderStyle() {
      if (this.temp.sfxsbk === true) {
        return { border: '1px solid #eeeeee', backgroundColor: this.customStyle.mrzt, opacity: this.customStyle.tmd, color: this.customStyle.fontColor };
      }
      if (this.temp.bkyy === true) {
        return { boxShadow: '0 2px 4px rgba(0, 0, 0, .12)', backgroundColor: this.customStyle.mrzt, opacity: this.customStyle.tmd, color: this.customStyle.fontColor };
      }
      return { backgroundColor: this.customStyle.mrzt, opacity: this.customStyle.tmd, color: this.customStyle.fontColor };
    },
    week() {
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const day = new Date().getDay();
      return weeks[day];
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData;
        this.titleStyle = { backgroundColor: newData.mrlb, opacity: newData.tmd };
        this.titleFont = { color: newData.lmys };
        this.activeStyle = { color: newData.xsys, backgroundColor: newData.xzbjs };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    dateNow: {
      handler(newData) {
        const date = newData.getFullYear() + '' + ((newData.getMonth() + 1) < 10 ? '0' + (newData.getMonth() + 1) : (newData.getMonth() + 1)) + '' + newData.getDate();
        this.initQuery(date);
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newData, oldData) {
        if (this.showHeader === true) {
          const pzx = JSON.parse(newData.data.pzx);
          this.setting = pzx;
          this.column = pzx.data;
          this.cid = newData.data.id;
          if (pzx.isRefresh !== undefined && pzx.isRefresh === true) {
            this.isRefresh = pzx.isRefresh;
          }
          if (pzx.refreshTime !== undefined && pzx.refreshTime !== null) {
            this.refreshTime = pzx.refreshTime;
          }
          this.initData();
        } else {
          const pzx = JSON.parse(newData.pzx);
          this.setting = pzx;
          if (pzx.isRefresh !== undefined && pzx.isRefresh === true) {
            this.isRefresh = pzx.isRefresh;
          }
          if (pzx.refreshTime !== undefined && pzx.refreshTime !== null) {
            this.refreshTime = pzx.refreshTime;
          }
          this.column = pzx.data;
          this.cid = newData.id;
          this.initData();
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  created() {
    this.initData();
  },
  methods: {
    // todo:: 这里注意下，后期考虑统一修改为 data
    initData() {
      queryAll().then(res => {
        const { data } = res;
        this.dataList = data;
      }).catch(() => {
        this.dataList = [];
      });
    },
    initQuery(date) {
      queryAll({ date: date }).then(res => {
        const { data } = res;
        this.queryList = data;
      }).catch(() => {
        this.queryList = [];
      });
    },
    callBack() {
      if (this.temp.dkfs === 2) { // 自定义打开方式
        if (undefined !== this.temp.path && this.temp.path !== null) {
          window.open(this.temp.path, '_blank');
        }
      } else if (this.temp.dkfs === 1) {
        this.$emit('fetch-data', this.temp);
      } else {
        console.log('');
      }
    },
    closeAlert(index) {
      this.active = null;
    },
    openAlert(index) {
      this.active = index;
    }
  }
};
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.custom-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.custom-data {
  flex: 0 1 auto;
  width: 100%;
  height: 50%;
  display: flex;
  flex-flow: row nowrap;
}
.custom-item {
  width: 450px;
  height: 100%;
  flex: 0 1 auto;
  padding: 10px;
  box-sizing: border-box;
}
.custom-item-right {
  flex: 1 1 auto;
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
}
.is-selected {
  color: #1989FA;
}
.el-calendar >>> .el-calendar-table .el-calendar-day {
  height: 55px !important;
}
.el-calendar >>> .el-calendar__body {
  padding: 0px !important;
}
</style>
